:root {
	/* 定義全站的主色調 (RGB 數值) */
	--main-padR: 20px;
	--main-rgb: 242, 227, 216;
	--describe-rgb: 192, 172, 166;
}

h1, h2, h3, p , a{
    margin: 0;
}
hr {
    border: 0;
    border-top: 1px solid rgb(var(--main-rgb));
    margin-bottom: 2ch;              
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

body.default{
	width: 95%;
	max-width: 1200px;
	font-size: clamp(16px, 4vw, 18px);
	font-family: courier , monospace;
	line-height: 1.3;
	color: rgb(var(--main-rgb));
	background-color: #000;
	padding-top: 40px;
	padding-left: 8px;
	padding-right: 8px;
    margin: 0 auto;
	border-left: 1px solid rgb(var(--main-rgb, 255, 255, 255));
	box-sizing: border-box;
	min-height: 100vh;
	scrollbar-gutter: stable; /*hmmm?*/
	padding-bottom: 10ch;
}
		
body.default a {
	display: inline-block;
	width: auto;
	text-decoration: none;
	font-weight: bold;
	color: rgb(var(--main-rgb));
}

.italic{
	font-style: italic;
}

.bold{
	font-weight: bold;
}

.lighter{
	font-weight: lighter;
}

.bolder{
	font-weight: bolder;
}

.oBit{
	opacity: 0.85;
}


		
body.default a:hover {
	text-decoration: underline;
}
		
body.default p {
	text-align: justify;
}
			
body.default .c p{
	text-align: justify;
}

body.default .aR {
	font-size: 50px;
    text-align: right;
}

body.default .aR p {
    text-align: inherit;
}

.menu {
    position: fixed;
    top: 60px;
    right: 20px;

    display: flex;
    flex-direction: column;

    background: rgb(0,0,0);
    padding: 10px;
    border: 1px solid #f2e3d8;
}

/* hidden state */
.hidden {
    display: none;
}

.menu a {
    /*color: #f2e3d8;*/
	color: rgb(var(--main-rgb));
    text-decoration: none;
    margin: 5px 0;
}

.menu a:hover {
    text-decoration: underline;
}

.menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;

    background: black;
    /*color: #f2e3d8;*/
	color: rgb(var(--main-rgb));
    border: 1px solid rgb(var(--main-rgb));
    padding: 5px 10px;
    cursor: pointer;
}
.lineSpace {
	box-sizing: border-box;
	
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;

    overflow-wrap: break-word; 
    word-break: normal;        
    hyphens: auto;          
}

.noLHeight{
	line-height: 1;
}

.rLHeight{
	line-height: 1.2;
}

.listLine {
    display: flex;
	width: 100%;
	flex-wrap: wrap; /*allow jump line*/
    align-items: flex-end;
	overflow-wrap: break-word;
	word-break: break-all;
	justify-content: space-between;
	gap: 0;
	border-bottom: 1px solid rgb(var(--main-rgb, 255, 255, 255), 0.5);
}

.sound{
	font-style: italic;
	font-weight: lighter;
}

.describe{
	font-style: italic;
	color: rgb(var(--describe-rgb, 192, 172, 166));
}

.voice{
	font-style: normal;
}

.title{
	flex: 1 1 auto;
}



.left   { flex: var(--leftF, 1); min-width: 0; text-align: left; }
.center { flex: var(--centerF, 1); min-width: 0; text-align: center; }
.right  { flex: var(--right, 1); min-width: 0; text-align: right; }

.listLine .left{flex: 2;}
.listLine .center{flex: 6;}
.listLine .right{flex: 2;}
.listLine .left.describe {
	flex: 6;
	font-style: normal;
	font-weight: normal;
}
.listLine .left.title {
	flex: 2;
	align-self: flex-start;
}

.imgLine{
	margin: 0 auto;
    display: inline-flex;
	width: 99%;
	flex-wrap: wrap; /*allow jump line*/
    align-items: flex-start;
	overflow-wrap: break-word;
	word-break: break-all;
	justify-content: space-between;
	gap: 0;

	border-bottom: 1px solid rgb(var(--main-rgb, 255, 255, 255), 0.5);
}


/*.imgLine .left.title{flex: 0 0 clamp(250px, 25%, 500px);; width: fit-content;}*/
.imgLine .left.title{
	flex: 0 0 var(--width-px, clamp(250px, 25%, 500px));
	width: fit-content;
	max-width: 95%;
	margin: 4px auto;
}
.imgLine .left.title img {
    max-width: 100%; 
	width: 100%;
    height: auto;
    display: block;
}
.imgLine .describe {
    flex: 1; 
	min-width: 10ch;
}

.imgLine .date.right {
	margin-left: auto;
	white-space: nowrap;
    flex: 0 0 auto;
    padding-left: 10px;
	text-align: right;
}

.imgLine .title a{
	display: inline;
	margin: 0;
	padding: 0;
}



.align-lCR{
	flex: var(--flex, 1);
	min-width: 0;
	text-align: var(--align, left);
	
}

.c_rgba { /*color rgba*/
			/* 加上透明度，顏色會自動跟隨主色調 */
			color: rgba(
			var(--rgb , var(--main-rgb)),
			var(--a, 1)
			);
		}

@media (max-width: 600px) {
    .listLine {
		line-height: 1.2 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* 1. 真正的「第一行」：標題 */
    /* 假設它是 .line 的第一個子元素 */
    .listLine > *:nth-child(1) {
		font-size: clamp(18px, 4vw, 20px);
        flex: 0 0 100% !important;
        width: 100% !important;
        /*margin-bottom: 5px;*/
    }

    /* 2. 你的「說明」：現在它是第二行的左邊 */
    .listLine > *:nth-child(2) {
        flex: 1 1 auto !important; /* 讓它變回自動寬度 */
        width: auto !important;    /* 覆蓋掉 100% */
        min-width: 0 !important;
        text-align: left !important;
    }

    /* 3. 你的「日期」：第二行的右邊 */
	.listLine > *:nth-child(3) {
        flex: 0 0 auto !important;
        width: auto !important;
        white-space: nowrap !important;
        text-align: right !important;
        padding-left: 10px;
		margin-left: auto;
	}
	/**/
	.imgLine {
		line-height: 1.2 !important;
		/*
		display: flex !important;
        flex-wrap: wrap !important;
	}

	.imgLine > *:nth-child(1) {
		font-size: clamp(18px, 4vw, 20px);
		min-width: 0px !important;
        flex: 0 1 50% !important;
		margin: 0 auto;
        width: 100% !important;
        margin-bottom: 5px;
		*/
    }
	
	    .imgLine > *:nth-child(1) img {
		min-width: 0px;

    }
	.imgLine .left.title{
		min-width: 0;
		flex: 0 1 clamp(10vw ,var(--width-px, 50%) ,90%);
		width: 100%;
	}
	
   .imgLine > *:nth-child(2) {
        flex: 1 1 auto !important; 
        width: auto !important;    
        min-width: 0 !important;
        text-align: left !important;
    }

	.imgLine > *:nth-child(3) {
        flex: 0 0 auto !important;
        width: auto !important;
        white-space: nowrap !important;
        text-align: right !important;
        padding-left: 10px;
		margin-left: auto;
	}
}

.opacity {
	opacity: var(--op,1);
}

.date {
	opacity: 0.5;
}

.right.date{
	flex: 0 0 auto;
	padding-left: 2ch;
	/*white-space: nowrap*/
}

.noMargin
{
	margin: 0;
}
.opacity1{
	opacity: 1;
}


.normal{
	font-weight: normal;
}

/*
.noMargin h1,
.noMargin a,
.noMargin p{
	margin: 0;
}
*/